<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>视频通话</title>

</head>

<body>
  <div>
    <h4>我的视频&nbsp;&nbsp;
      <button type="button" id="startvideo">发起视频</button>&nbsp;&nbsp;
      <button type="button" id="endvideo">结束视频</button>
    </h4>
    <video id="myvideo" autoplay playsinline></video>
  </div>
  <div>
    <h4>对方的视频：</h4>
    <video id="usersvideo" width="" height="" controls autoplay></video>
  </div>
</body>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script>
  console.log(adapter.browserDetails.browser);
  var myvideo = document.querySelector('#myvideo');
  var usersvideo = document.querySelector('#usersvideo');
  var startvideo = document.querySelector('#startvideo')
  var endvideo = document.querySelector('#endvideo')
  var videostream = ''
  console.log(startvideo);
  var constraints = {
    audio: true,
    video: true
  };
  //发起视频
  startvideo.onclick = () => {
    console.log('发起视频');

    function handleSuccess (stream) {
      var videoTracks = stream.getVideoTracks();
      console.log('Using video device: ' + videoTracks[0].label);
      myvideo.srcObject = stream;
    }
    function handleError (error) {
      console.log('getUserMedia error: ' + error.name, error);
    }

    videostream = navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
  }
  //结束视频
  endvideo.onclick = () => {
    myvideo.src = ''
    console.log('结束视频');
    videostream.then(item => {
      console.log(item);
    })
    // videostream.then(item => {
    //   console.log(item);
    // })

    // videostream.getTracks().forEach(function (track) {
    //   track.stop();
    //   console.log('关闭视频通道不成功', track);
    //   myvideo.src = ''
    // })



  }

</script>

</html>